import React from 'react';
import { Link } from 'react-router';
import { Breadcrumb, Row, Col, Input, DatePicker, Select, Button, Table, Modal, Pagination, message, Popconfirm, Form, Cascader, Upload, Icon, Checkbox } from 'antd';
import moment from 'moment';
import $ from 'jquery';
import Config from '../../common/config';
import '../../common/common.less';


import { EditorState, convertToRaw, convertFromRaw, ContentState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import { Editor } from 'react-draft-wysiwyg';
import htmlToDraft from 'html-to-draftjs';


const FormItem = Form.Item;
const Textarea = Input.TextArea;
const Option = Select.Option;
const config = new Config();

class diseaseManage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cgtData: [], //调养方案数据
      title: '', //疾病名称
      behavior: '',//症状表现
      status: 0,  //0全部 1未发布 2已发布
      page: 1,
      pageSize: 10,
      total: 5,
      categoryCheck: [],//类目联动选择框

      addModal: false,//添加模态框
      fileList1: [],//图片上传
      diseaseName: [],//疾病名称
      classify: [],//选择的类目
      condi_status: null,//选择的是否关联商品状态
      condi_diseasename: null,//选择的调理类型
      disease_title: null,//选择的疾病名称
      disease_behavior: '',//输入的症状表现
      isRelate: null,//选择的是否关联商品

      isNew: null,
      changeId: null,
      goodsShow: false,

      goodsData: [],// 商品库数据
      goodsTotal: null,//商品库数据总数
      goodsPage: 1,
      goodsPageSize: 10,

      inKey: '',//输入的商品库查询商品名
      isPres: null,//选择的商品库是否是处方药
      checkGoodsList: [],//选择的商品
      checkGoodsId: [],//选择的商品id
      selectedRowKeys: '',//check控制
      selectedShow: false, //选择后的表格显示
      condi_diseasename_add: [],

      editorState: EditorState.createEmpty(), //调养内容编辑器状态
      condi_content: [],
      isLook: false,//是否是查看
    }
  }

  componentDidMount() {
    this.initData();
    //富文本编辑器图片上传
    $('.rdw-image-wrapper .rdw-option-wrapper').click(
      (e) => {
        //e.stopPropagation();
        $('#xFile').trigger('click');
        $('.rdw-image-modal').focus();

        // $('.rdw-image-modal-url-input').onkeypress(
        //     (editor) => {
        //         console.log(e.key);
        //     }
        // );
      }
    );
  }

  // 获取初始数据
  initData() {
    const { classify, condi_status, condi_diseasename, disease_title, disease_behavior, isRelate } = this.state;
    $.ajax({
      url: `${config.healthAftercare}/healthplatform/conditioning`,
      type: 'get',
      headers: {
        'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
      },
      data: {
        pagesize: this.state.pageSize,
        pageindex: this.state.page,
        condi_classify: classify[1],
        condi_status,
        condi_diseasename,
        disease_title,
        disease_behavior,
        isRelate,
      },
      classify: null,//选择的类目

      success: res => {
        console.log(res)
        if (res.code == 200) {
          let initcat = res.category;
          let categoryCheck = [];
          for (let i in initcat) {
            console.log(i, initcat[i])
            let checkitem = {};
            checkitem.value = i;
            checkitem.label = i;
            let itemlist = []
            initcat[i].map((val) => {
              itemlist.push({ value: val.id, label: val.second_classify })
            })
            checkitem.children = itemlist
            categoryCheck.push(checkitem)
          }
          console.log(categoryCheck, 'categoryCheck')
          this.setState({
            cgtData: res.data.rows,
            categoryCheck,
            total: res.data.count,
            diseaseName: res.diseaseName
          })
        } else {
          message.error(res.mes)
        }
      }
    })
  }
  // 获取商品库数据
  initGoods() {
    $.ajax({
      url: 'https://yaotest.gooeto.com/goodsAPI/products/list',
      method: 'get',
      headers: {
        'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
      },
      data: {
        page: this.state.goodsPage,
        inKey: this.state.inKey,
        isPres: this.state.isPres
      },
      success: res => {
        console.log(res, '商品库数据')
        if (res.code === 200) {
          this.setState({
            goodsData: res.data.rows,
            goodsTotal: res.data.count
          })
        }
      }
    })
  }

  // 搜索/清空
  filterOrders(key) {
    if (key) {
      // 搜索
      this.setState({
        page: 1
      }, () => {
        this.initData();
      });
    } else {
      // 清空
      this.setState({
        goodsPage: 1,
        classify: [],//选择的类目
        condi_status: null,//选择的是否关联商品状态
        condi_diseasename: null,//选择的调理类型
        disease_title: null,//选择的疾病名称
        disease_behavior: '',//输入的症状表现
        isRelate: null,//选择的是否关联商品
      }, () => {
        this.initData();
      });
    }
  }
  // 商品库搜索清空
  filterOrdersGoods(key) {
    if (key) {
      // 搜索
      this.setState({
        goodsPage: 1
      }, () => {
        this.initGoods();
      });
    } else {
      // 清空
      this.setState({
        goodsPage: 1,
        inKey: '',
        isPres: null
      }, () => {
        this.initGoods();
      });
    }
  }

  // 切换分页
  onChangePage(page) {
    this.setState({
      page
    }, () => {
      this.initData();
    });
  }
  // 切换商品库分页
  onChangePageGoods(page) {
    this.setState({
      goodsPage: page
    }, () => {
      this.initGoods();
    })
  }
  // 详情
  conDetail(record) {
    console.log(record)
  }

  //富文本编辑器编辑改变内容函数
  onEditorStateChange(index, editorState) {
    console.log(editorState)
    const instructions = draftToHtml(convertToRaw(editorState.getCurrentContent()));
    console.log(instructions)
    let condi_content = this.state.condi_content;
    condi_content[index].condi_content_html = editorState;
    this.setState({
      condi_content
    }, () => {
      console.log(this.state.condi_content)
    })
    //this.props.form.setFieldsValue({content:instructions}); 
  }
  //富文本编辑器图片上传
  upload(e) {
    console.log(e)
    console.log('上传图片')
    const formData = new FormData(); //创建一个form表单对象
    formData.append('Filedata', e); //表单对象压入图片

    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', config.UploadFile + '/uploadproductimg');
      xhr.send(formData);
      xhr.addEventListener('load', () => {
        const response = JSON.parse(xhr.responseText);
        if (response.code == 200) {
          console.log(response)
          // this.setState({
          //   imageFile: response.name
          // }, () => {
          //   // $('.rdw-image-modal-url-input')[0].value = config.Filepath + response.name;
          //   // $('.rdw-image-modal-size .rdw-image-modal-size-input')[1].value = '100%';
          //   // $('.rdw-image-modal-url-input').focus();
          //   // $('.rdw-image-modal-url-input').blur();
          // });
          resolve({ data: { link: config.Filepath + response.name } })
        }
      });
      xhr.addEventListener('error', () => {
        const error = JSON.parse(xhr.responseText);
        reject(error)
      });
    })

  }

  //编辑器预览功能
  previewEditor(key) {
    //key=0 为说明书预览，key=1为介绍预览
    let html = '';
    if (key == 0) {
      html = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()));
    } else {
      html = draftToHtml(convertToRaw(this.state.editorIntro.getCurrentContent()));
    }
    this.setState({
      visible: true,
    }, () => {
      $('#preview').html(html)
    })

  }

  // 显示模态框
  showModal(values, isLook) {
    console.log('是否是编辑', values)

    if (values) {//编辑
      $.ajax({
        url: `${config.healthAftercare}/healthplatform/findOne/${values.id}`,
        method: 'get',
        headers: {
          'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
        },
        success: res => {
          console.log(res)
          if (res.code == 200) {
            // const instructions = ContentState.createFromBlockArray(htmlToDraft(values.condi_content || '<p></p>')) //富文本编辑器初始化
            // const editorState = EditorState.createWithContent(instructions)

            let condi_content = JSON.parse(res.data.condi_content)
            console.log(condi_content, 'condi_content')
            let array = [];
            for (let i = 0; i < condi_content.length; i++) {
              let obj = {};
              obj.condi_diseasename = condi_content[i].condi_diseasename;
              obj.condi_content_html = EditorState.createWithContent(ContentState.createFromBlockArray(htmlToDraft(condi_content[i].condi_content_html)));
              array[i] = obj;
              // array[i].condi_content_html=condi_content[i].condi_content_html;
              console.log(condi_content[i].condi_diseasename)
            }
            console.log(array, 'array')


            this.setState({
              checkGoodsList: res.productInfo.data,
              checkGoodsId: JSON.parse(res.data.condi_productId),
              condi_content: array,
              condi_diseasename_add: res.data.condi_diseasename.split(',')
            })
          }
        }
      })

      let fileList1 = []
      fileList1.push({
        uid: -1,
        name: values.condi_ImgUrl,
        status: 'done',
        url: config.Filepath + values.condi_ImgUrl,
        thumbUrl: config.Filepath + values.condi_ImgUrl,
      })
      this.setState({
        isNew: false,
        addModal: true,
        changeId: values.id,
        checkGoodsId: JSON.parse(values.condi_productId),
        fileList1
      }, () => {
        this.props.form.setFieldsValue({
          condi_name: values.condi_name,
          first_classify: [values.classifyss.first_classify, values.classifyss.id],
          condi_showclass: values.condi_showclass,
          condi_disease_id: values.diseases.id,
          condi_ImgUrl: fileList1,
          // condi_ImgUrl:this.state.fileList1,
        })
        console.log(this.state.fileList1)
      })
      if (isLook) {
        console.log('是查看')
        this.setState({
          isLook: true
        })
      } else {
        this.setState({
          isLook: false
        })
      }

    } else {//新增
      this.props.form.resetFields();
      this.setState({
        isNew: true,
        addModal: true,
        fileList1: [],
        editorState: EditorState.createEmpty(),//清空富文本编辑器
        condi_content: [{
          condi_diseasename: null,
          condi_content_html: EditorState.createEmpty()
        }],
        condi_diseasename_add: [],
        checkGoodsList: [],//选择的商品
        checkGoodsId: [],//选择的商品id
        isLook: false
      })
    }
  }

  // 发布和下架
  publish(record, status) {
    console.log('发布', record, status)
    $.ajax({
      url: `${config.healthAftercare}/healthplatform/conditioning`,
      method: 'put',
      headers: {
        'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
      },
      data: {
        id: record.id,
        status
      },
      success: res => {
        console.log(res)
        if (res.code === 200) {
          message.success(res.mes)
          this.initData()
        } else {
          message.error(res.mes)
        }
      }
    })
  }
  // 删除
  deletedise(record) {
    console.log('删除', record)
    $.ajax({
      url: `${config.healthAftercare}/healthplatform/conditioning`,
      method: 'delete',
      headers: {
        'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
      },
      data: {
        id: record.id
      },
      success: res => {
        console.log(res)
        if (res.code === 200) {
          message.success(res.mes)
          this.initData()
        } else {
          message.error(res.mes)
        }
      }

    })
  }

  // 表格
  getColumns() {
    return [{
      title: '序号',
      width: '5%',
      dataIndex: 'id'
    }, {
      title: '渠道名称',
      width: '5%',
      dataIndex: 'condi_name'
    }, {
      title: '一级类目',
      width: '10%',
      dataIndex: 'classifyss.first_classify'
    }, {
      title: '二级类目',
      width: '10%',
      dataIndex: 'classifyss.second_classify'
    }, {
      title: '显示栏目',
      width: '7%',
      dataIndex: 'condi_showclass'
    }, {
      title: '显示图片',
      width: '10%',
      dataIndex: 'condi_ImgUrl',
      render: (text, record) => (
        <img src={`https://xcximg.juseyun.com/${record.condi_ImgUrl}`} alt="" style={{ width: '80px', height: '80px', textAlign: 'center' }} />
      )
    }, {
      title: '疾病名称',
      width: '10%',
      dataIndex: 'diseases.disease_title'

    }, {
      title: '调理类型',
      width: '10%',
      dataIndex: 'condi_diseasename'
    }, {
      title: '详情',
      width: '5%',
      dataIndex: 'condi_content',
      render: (text, record) => (
        <Button type="primary" onClick={this.showModal.bind(this, record, true)} >查看</Button>
      )
    }, {
      title: '更新人员',
      width: '10%',
      dataIndex: 'condi_personnel'
    }, {
      title: '状态',
      width: '5%',
      dataIndex: 'condi_status',
      render: (text, record) => (
        <p>{record.condi_status === 0 ? '未发布' : '已发布'}</p>
      )
    }, {
      title: '操作',
      width: '25%',
      dataIndex: 'caozuo',
      render: (text, record) => (
        <div>
          <div style={record.condi_status === 0 ? { display: "inline" } : { display: "none" }}>
            <Button type="primary" onClick={this.showModal.bind(this, record, false)} >编辑</Button>&nbsp;&nbsp;&nbsp;&nbsp;
            <Button type="primary" onClick={this.publish.bind(this, record, 1)} >发布</Button>&nbsp;&nbsp;&nbsp;&nbsp;
            <Popconfirm title="您确定要删除么？" okText="是" cancelText="否" onConfirm={this.deletedise.bind(this, record)}>
              <Button type="danger">删除</Button>
            </Popconfirm>

          </div>
          <div style={record.condi_status === 1 ? { display: "inline" } : { display: "none" }}>
            <Button type="primary" onClick={this.publish.bind(this, record, 0)} >下架</Button>
          </div>
        </div>
      )
    }]
  }

  // 商品库列表
  getGoodsColumns() {
    return [
      {
        title: '选择',
        width: '5%',
        dataIndex: 'id',
        render: (text, record) => {
          return <p>
            <Checkbox
              onChange={this.checkChange.bind(this, record)}
              defaultChecked={this.state.checkGoodsId.indexOf(record.productId) !== -1 ? true : false}
              disabled={this.state.isLook}
            //defaultChecked={this.initGoodsChecked.bind(this,record)}
            >
            </Checkbox>
          </p>
        }
      },
      {
        title: '药品id',
        width: '10%',
        dataIndex: 'productId'
      }, {
        title: '药品名称',
        width: '15%',
        dataIndex: 'productName'
      }, {
        title: '通用名称',
        width: '10%',
        dataIndex: 'generalName'
      }, {
        title: '类别',
        width: '10%',
        dataIndex: 'isPres',
        render: (text, record) => (
          <p>{record.isPres == 'N' ? '非处方药' : '处方药'}</p>
        )
      }, {
        title: '规格',
        width: '10%',
        dataIndex: 'specification',

      }, {
        title: '包装',
        width: '10%',
        dataIndex: 'unit'
      }, {
        title: '品牌',
        width: '10%',
        dataIndex: 'brandName'
      }, {
        title: '生产厂家',
        width: '20%',
        dataIndex: 'manufacturer',
        // render: (text, record) => (
        //   <Button type="primary" onClick={this.conDetail.bind(this, record)}>查看</Button>
        // )
      }]
  }

  // 保存
  save(e) {
    this.props.form.validateFields((err, values) => {
      console.log(err, values, '提交')
      if (!err) {
        console.log('成功')
        let condi_content = this.state.condi_content;
        let diseaseNameChack=true; //验证是否有没有没设置调养类型的
        condi_content.map((item,index)=>{
          if(item.condi_diseasename==null){
            message.error(`第${index+1}个调养内容没有设置调理类型`)
            diseaseNameChack=false;
          }
        })
        console.log(diseaseNameChack)
        let condi_content_new = []
        for (let i in condi_content) {
          let obj = {};
          obj.condi_diseasename = condi_content[i].condi_diseasename;
          obj.condi_content_html = draftToHtml(convertToRaw(condi_content[i].condi_content_html.getCurrentContent()));
          //let instructions=draftToHtml(convertToRaw(condi_content[i].condi_content_html.getCurrentContent()));
          //console.log(instructions)
          //condi_content_new[i].condi_content_html=draftToHtml(convertToRaw(condi_content[i].condi_content_html.getCurrentContent()));
          condi_content_new[i] = obj
        }
        console.log(condi_content_new)
        let data = {
          condi_name: values.condi_name,
          condi_classify: values.first_classify[1],
          condi_showclass: values.condi_showclass,
          condi_ImgUrl: values.condi_ImgUrl[0].response ? values.condi_ImgUrl[0].response.data : values.condi_ImgUrl[0].name,
          condi_disease_id: values.condi_disease_id,
          condi_content: JSON.stringify(condi_content_new),
          condi_productId: this.state.checkGoodsId,
          condi_diseasename: this.state.condi_diseasename_add.toString()
        }
        console.log(data)
        // 新增
        if(diseaseNameChack){
          if (this.state.isNew == true) {
            $.ajax({
              url: `${config.healthAftercare}/healthplatform/conditioning`,
              method: 'post',
              headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
              },
              traditional: true,
              data,
              success: res => {
                console.log(res)
  
                if (res.code == 200) {
                  this.initData()
                  message.success(res.mes)
                  this.setState({
                    addModal: false
                  })
                  console.log(this.state.addModal)
                } else {
                  message.error(res.mes)
                }
  
              }
            })
          } else {  //修改
            $.ajax({
              url: `${config.healthAftercare}/healthplatform/conditioning`,
              method: 'put',
              headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
              },
              traditional: true,
              data: {
                id: this.state.changeId,
                datas: JSON.stringify(data)
              },
              success: res => {
                console.log(res, '编辑的返回结果')
                if (res.code == 200) {
                  this.initData()
                  message.success(res.mes)
                  this.setState({
                    addModal: false
                  })
                  console.log(this.state.addModal)
                } else {
                  message.error(res.mes)
                }
              }
            })
          }
        }
        

      }
    })
  }

  onChange(value) {
    console.log(value);
  }
  glChange(val) {

  }

  //取消，关闭对话框
  handleCancel() {
    this.props.form.resetFields();
    this.setState({
      addModal: false,
      checkGoodsList: [],//选择的商品
      checkGoodsId: [],//选择的商品id
      fileList1: []
    });
  }
  //选择搜索条件
  selectChange(tip, e) {
    console.log(tip, e)
    this.setState({
      [tip]: e
    })
  }
  //输入搜索条件
  inputChange(tip, e) {
    console.log(tip, e.target.value)
    this.setState({
      [tip]: e.target.value
    })
  }

  //限制用户必须上传图片格式的文件、图片大小
  beforeUpload(file, fileList) {
    console.log(file)
    let isIMG = file.type.indexOf('image') != -1;
    if (!isIMG) {
      message.config({ top: 50 });
      message.error('您只能上传图片！');
    }
    let isLt10M = file.size / 1024 / 1024 < 10;
    if (!isLt10M) {
      message.config({ top: 50 });
      message.error('您上传的图片大小必须小于10MB！');
    }
    return isIMG && isLt10M;
  }
  //上传图片
  normFile1(e) {
    console.log(e)
    // let url=config.Filepath+e.fileList[0].response.data;
    // console.log(url);
    if(e.file.status==='done'){
      console.log('done')
      if(e.fileList[0].response.code===200){
        console.log(config.Filepath+e.fileList[0].response.data)
        let url=config.Filepath+e.fileList[0].response.data;
        this.img2base64(url).then(res=>{
          console.log(res)
          if(res){
            this.setState({
              fileList1: e.fileList
            });
            if (Array.isArray(e)) {
              return e;
            }
            return e && e.fileList;
          }else{
            message.error('图片比例大小不符合要求')
          }
        })

      }
    }
    this.setState({
      fileList1: e.fileList
    });
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  img2base64(url) {
    return new Promise(resolve => {
        const imgs = new Image();
        imgs.src = url;
        imgs.onload = () => {
            let a = imgs.width; 
            let b = imgs.height; 
            // let a = imgs.width / imgs.height;
            // let b = 750 /810;
            // if(a == b) {
            //     resolve(true);
            // } else {
            //     resolve(false);
            // }
            if(a>=710&&b>=399){
              if((a/b)==(16/9)){
                resolve(true)
              }
            }else{
              resolve(false)
            }
        };

       
    });
}
  // 打开商品库
  openGoods() {
    this.initGoods();
    this.setState({
      goodsShow: !this.state.goodsShow
    })
  }

  // 取消选中后删除
  removeByValue(arr, val) {
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] == val) {
        arr.splice(i, 1);
        break;
      }
    }
  }
  // 商品库选择商品
  checkChange(record, e) {
    console.log(record, e.target.checked)
    const { checkGoodsList, checkGoodsId } = this.state
    if (e.target.checked) {
      console.log(record, '选中')
      checkGoodsList.push(record)
      checkGoodsId.push(record.productId)
    } else {
      for (let [i, ele] of checkGoodsList.entries()) {
        if (record.productId == ele.productId) {
          checkGoodsList.splice(i, 1);
          break;
        }
      }
      for (let [i, ele] of checkGoodsId.entries()) {
        if (record.productId == ele) {
          checkGoodsId.splice(i, 1);
          break;
        }
      }
    }
    this.setState({
      checkGoodsList,
      checkGoodsId
    }, () => {
      console.log(checkGoodsList, checkGoodsId, '选择后')
    })
  }
  // 初始化商品库选择状态
  initGoodsChecked(record) {
    let ischecked = false
    // this.state.checkGoodsList.map((item)=>{
    //   if(item==record){
    //     ischecked=true;
    //     break;
    //   }
    // })
    let checkGoodsList = this.state.checkGoodsList
    for (let i = 0; i < checkGoodsList.length; i++) {
      if (checkGoodsList[i] == record) {
        ischecked = true;
        return;
      }
    }
    return ischecked
  }
  // 清空已选商品
  clearGoods() {
    this.setState({
      checkGoodsList: [],
      checkGoodsId: [],
      goodsData: []
    }, () => {
      this.initGoods()
    })
  }
  selectSure() {
    this.setState({
      goodsShow: false,
      selectedShow: true,
      goodsData: []
    })
  }

  // 调养内容新增
  condi_content_add() {
    let condi_content = this.state.condi_content;
    condi_content.push({
      condi_diseasename: null,
      condi_content_html: EditorState.createEmpty()
    });
    this.setState({
      condi_content
    })
  }
  condi_diseasename_change(index, val) {
    let { condi_content, condi_diseasename_add } = this.state;
    condi_content[index].condi_diseasename = val;
    condi_diseasename_add[index] = val;
    this.setState({
      condi_content,
      condi_diseasename_add
    })
  }
  // 调养内容删除
  condi_content_del(index) {
    console.log(index,'调养内容删除')
    let condi_content=this.state.condi_content;
    condi_content.splice(index,1);
    this.setState({
      condi_content
    })
    
  }

  render() {
    const columns = this.getColumns();
    const goodsColumns = this.getGoodsColumns();
    const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } };
    const { getFieldDecorator } = this.props.form;
    const { options, categoryCheck } = this.state;


    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        this.setState({
          selectedRowKeys,
          checkGoodsList: selectedRows
        })
      },
      getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      }),
    }
    return (
      <div className='goods-label clerafix'>
        < Breadcrumb separator=">" >
          <Breadcrumb.Item>健康调养</Breadcrumb.Item>
          <Breadcrumb.Item>调养管理</Breadcrumb.Item>
        </Breadcrumb >
        <div style={{ marginTop: '20px' }}>
          <div className="member-content-Search" style={{ marginBottom: 20 }}>

            {/* <Input addonBefore='疾病名称' placeholder="请输入"  onChange={this.InputSearch.bind(this,0)} /> */}
            <Row type="flex" justify="space-between">
              <Col span={5}>
                <span>类目:&nbsp;&nbsp;</span>
                <Cascader options={categoryCheck} onChange={this.selectChange.bind(this, 'classify')} placeholder="请选择类目" />
              </Col>
              <Col span={5}>
                <span>是否关联商品:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <Select value={this.state.isRelate} onChange={this.selectChange.bind(this, 'isRelate')} style={{ width: '80px' }}>
                  <Option value=''>全部</Option>
                  <Option value='true'>是</Option>
                  <Option value='false' >否</Option>
                </Select>
              </Col>
              <Col span={5}>
              </Col>
            </Row>
            <Row type="flex" justify="space-between" style={{ marginTop: '30px' }}>
              <Col span={5}>
                <span>疾病名称:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <Select value={this.state.disease_title} onChange={this.selectChange.bind(this, 'disease_title')} style={{ width: '160px' }}>
                  {
                    this.state.diseaseName.map((item) => {
                      return <Option key={item.id} value={item.id}>{item.disease_title}</Option>
                    })
                  }
                </Select>
              </Col>
              <Col span={5}>
                <Input addonBefore='症状表现' onChange={this.inputChange.bind(this, 'disease_behavior')} value={this.state.disease_behavior} />
              </Col>
              <Col span={5}>
                <span>调理类型:&nbsp;&nbsp;&nbsp;&nbsp;</span>

                <Select value={this.state.condi_diseasename} onChange={this.selectChange.bind(this, 'condi_diseasename')} style={{ width: '160px' }}>
                  <Option value="中医中药调理">中医中药调理</Option>
                  <Option value="中医针灸调理">中医针灸调理</Option>
                  <Option value="中医推拿调理" >中医推拿调理</Option>
                  <Option value="中医拔火罐调理" >中医拔火罐调理</Option>
                  <Option value="运动调理" >运动调理</Option>
                  <Option value="饮食调理" >饮食调理</Option>
                </Select>
              </Col>
              <Col span={5}>
                <span>状态:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <Select onChange={this.selectChange.bind(this, 'condi_status')} style={{ width: '80px' }} value={this.state.condi_status}>
                  <Option value='null'>全部</Option>
                  <Option value="0">未发布</Option>
                  <Option value="1" >已发布</Option>
                </Select>
              </Col>
            </Row>
          </div>
        </div>
        <div style={{ marginBottom: '30px' }}>
          <Button className='ant-btn-primary' icon='search' onClick={this.filterOrders.bind(this, 1)}>搜索</Button>&nbsp;&nbsp;&nbsp;&nbsp;
        <Button className='ant-btn-primary' icon='sync' onClick={this.filterOrders.bind(this, 0)}>重置</Button>
        </div>
        <div>
          <Button className='ant-btn-primary' onClick={this.showModal.bind(this, false)}>新增调养方案</Button>
        </div>
        <div style={{ marginTop: '20px' }}>
          <Table columns={columns} dataSource={this.state.cgtData} pagination={false} bordered />
        </div>
        <div className='goods-label-let clearfix'>
          <div className="floor-ppagi">
            {
              this.state.total == 0 ?
                <p className="floor-ppagip">
                  共{this.state.total}条记录
              </p> :
                <p className="floor-ppagip">
                  当前显示
                {this.state.pageSize * (this.state.page - 1) + 1}—
                {this.state.pageSize * this.state.page < this.state.total ? this.state.pageSize * this.state.page : this.state.total}条记录，
                共{this.state.total}条记录
              </p>
            }
            <Pagination current={this.state.page} total={this.state.total || 1} defaultPageSize={this.state.pageSize} onChange={this.onChangePage.bind(this)} />
          </div>
        </div>

        <Modal
          title={this.state.isNew == true ? '新增调养方案' :this.state.isLook==true? '查看调养方案':'修改调养方案'}
          visible={this.state.addModal}
          okText='保存'
          cancelText='取消'
          onCancel={this.handleCancel.bind(this)}
          footer={this.state.isLook ? null : <div><Button onClick={this.handleCancel.bind(this)}>取消</Button><Button onClick={this.save.bind(this)} type='primary'>保存</Button></div>}
          onOk={this.save.bind(this)}
          maskClosable={false}
          // style={{width:'1600px'}}
          className="little-tool-modal"
        >
          <Form >
            <Row type="flex" justify="space-between">
              <Col span={10}>
                <FormItem
                  label='选择渠道'
                  {...formItemLayout}
                >
                  {getFieldDecorator('condi_name', {
                    rules: [{
                      required: true, message: '请选择渠道',
                    }]
                  })(
                    <Select disabled={this.state.isLook}>
                      <Option value="小红历">小红历</Option>
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col span={10}>
                <FormItem
                  label='类目'
                  {...formItemLayout}
                >
                  {getFieldDecorator('first_classify', {
                    rules: [{
                      required: true, message: '请选择类目',
                    }]
                  })(
                    <Cascader options={categoryCheck} onChange={this.onChange} placeholder="请选择类目" disabled={this.state.isLook} />
                  )}
                </FormItem>

              </Col>

            </Row>
            <Row type="flex" justify="space-between">
              <Col span={10}>
                <FormItem
                  label='显示栏目'
                  {...formItemLayout}
                >
                  {getFieldDecorator('condi_showclass', {
                    rules: [{
                      required: true, message: '请选择显示栏目）',
                    }]
                  })(
                    <Select disabled={this.state.isLook}>
                      <Option value="常规调养">常规调养</Option>
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col span={10}>
                <FormItem
                  label='疾病名称'
                  {...formItemLayout}
                >
                  {getFieldDecorator('condi_disease_id', {
                    rules: [{
                      required: true, message: '请选择疾病名称',
                    }]
                  })(
                    <Select disabled={this.state.isLook}>
                      {
                        this.state.diseaseName.map((item) => {
                          return <Option key={item.id} value={item.id}>{item.disease_title}</Option>
                        })
                      }
                    </Select>
                  )}
                </FormItem>

              </Col>

            </Row>
            <Row>
              <Col span={10}>
                <FormItem
                  label='封面图片'
                  {...formItemLayout}
                >
                  {getFieldDecorator('condi_ImgUrl', {
                    valuePropName: 'fileList1', getValueFromEvent: this.normFile1.bind(this),
                    rules: [{ required: true, message: '请上传商品图片！' }],
                  })(
                    <Upload
                      accept="image/*"
                      name="img"
                      action={config.UploadFile + "/websitProductImg"}
                      beforeUpload={this.beforeUpload.bind(this)}
                      listType="picture"
                      className="upload-list-inline onepicture"
                      fileList={this.state.fileList1}
                      disabled={this.state.isLook}
                    // defaultFileList={this.state.fileList1}
                    >
                      {
                        this.state.fileList1.length >= 1 ? null :
                          <Button><Icon type="upload" /> 上传图片</Button>
                      }
                    </Upload>
                  )}
                </FormItem>
                <span>图片规格：图片比例为16:9,且宽高不小于710×399</span>
              </Col>
            </Row>
            {/* <h2 style={{ marginBottom: '20px' }} >调养内容配置:</h2> */}
            <div style={{ marginBottom: '20px' }}>
              <span style={{display:'inline-block',width:'25%',borderBottom:'1px solid #000',heigth:'25px'}}></span>
              <span style={{fontSize:'18px',lineHeight:'50px',verticalAlign:'middle'}}>调养内容配置</span>
              <span style={{display:'inline-block',width:'60%',borderBottom:'1px solid #000',height:'25px'}}></span>
            </div>
            
            <div style={{ overflow: 'auto' }}>
              {
                this.state.condi_content.map((item, index) => {
                  return (
                    <div style={{ width: '30%', float: 'left', margin: '1% 1%' }}>
                      <div style={{ marginBottom: '5px' }}>
                        <span>调理类型:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <Select style={{ width: '160px' }} onChange={this.condi_diseasename_change.bind(this, index)} defaultValue={item.condi_diseasename} disabled={this.state.isLook}>
                          <Option value="中医中药调理">中医中药调理</Option>
                          <Option value="中医针灸调理">中医针灸调理</Option>
                          <Option value="中医推拿调理" >中医推拿调理</Option>
                          <Option value="中医拔火罐调理" >中医拔火罐调理</Option>
                          <Option value="运动调理" >运动调理</Option>
                          <Option value="饮食调理" >饮食调理</Option>
                        </Select>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <Popconfirm title="您确定要删除么？" okText="是" cancelText="否" onConfirm={this.condi_content_del.bind(this,index)}>
                          <Button type="danger" style={index==0?{display:'none'}:{display:'inline'}}>删除</Button>
                        </Popconfirm>
                      </div>
                      <p className="goodsdetail-form-title">调养内容</p>
                      <Editor
                        editorState={item.condi_content_html}  //会报错
                        //editorState={this.state.isLook==true?item.condi_content_html:null}
                        wrapperClassName="demo-wrapper"
                        editorClassName="demo-editor"
                        onEditorStateChange={this.onEditorStateChange.bind(this, index)}
                        disabled={this.state.isLook}
                        toolbar={{
                          //inline: { inDropdown: true },
                          //list: { inDropdown: true },
                          textAlign: { inDropdown: true },
                          link: { inDropdown: true },
                          image: {
                            uploadCallback: this.upload.bind(this),
                            //     alt: { present: true, mandatory: true }
                            defaultSize: {
                              height: 'auto',
                              width: '100%',
                            },
                          }
                        }}
                        localization={{
                          locale: 'zh'
                        }}
                      />

                    </div>

                  )
                })
              }
            </div>
          </Form>



          <div style={{ overflow: 'auto' }}>
            <div style={{ float: 'right' }}>
              <Button icon='plus' style={this.state.condi_content.length >= 6 ? { display: 'none' } : { display: 'block' }} onClick={this.condi_content_add.bind(this)}>添加内容</Button>
            </div>

          </div>



          <div style={{ marginBottom: '20px' }}>
              <span style={{display:'inline-block',width:'25%',borderBottom:'1px solid #000',heigth:'25px'}}></span>
              <span style={{fontSize:'18px',lineHeight:'50px',verticalAlign:'middle'}}>商品配置</span>
              <span style={{display:'inline-block',width:'60%',borderBottom:'1px solid #000',height:'25px'}}></span>
            </div>
          <div style={{ margin: '20px 0' }}  style={this.state.isLook?{display:'none'}:{display:'block'}}>
            关联商品：&nbsp;&nbsp;&nbsp;&nbsp;<Button type="primary" onClick={this.openGoods.bind(this)}>{this.state.goodsShow == true ? '关闭商品库' : '打开商品库'}</Button>&nbsp;&nbsp;&nbsp;(已上架商品)
          </div>
          <div style={this.state.goodsShow == true ? { display: 'block' } : { display: 'none' }}>
            <Row>
              <p>商品库选择器</p>
            </Row>

            <div>
              <Row type='flex' justify='space-between' style={{ marginTop: '30px' }}>
                <Col span={10}>
                  <Input addonBefore='id/药品名称/通用名/品牌' placeholder='请输入' onChange={this.inputChange.bind(this, 'inKey')} value={this.state.inKey} />
                </Col>
                <Col span={10}>
                  类别： <Select style={{ width: '100px' }} onChange={this.selectChange.bind(this, 'isPres')} value={this.state.isPres}>
                    <Option value="Y">处方药</Option>
                    <Option value="N" >非处方药</Option>
                  </Select>
                </Col>
              </Row>
              <Row type='flex' justify='space-between' style={{ marginTop: '30px' }}>
                <Col>
                  <Button className='ant-btn-primary' icon='search' onClick={this.filterOrdersGoods.bind(this, 1)}>搜索</Button>&nbsp;&nbsp;&nbsp;&nbsp;
                  <Button className='ant-btn-primary' icon='sync' onClick={this.filterOrdersGoods.bind(this, 0)}>重置</Button>
                </Col>
              </Row>
              <Table columns={goodsColumns}
                //  rowSelection={rowSelection} 
                dataSource={this.state.goodsData}
                pagination={false} bordered style={{ marginTop: '30px' }} rowKey='productId' />
              <div className='goods-label-let ' style={{ zIndex: '1000' }}>
                <div className="floor-ppagi">
                  {
                    this.state.goodsTotal == 0 ?
                      <p className="floor-ppagip">
                        共{this.state.goodsTotal}条记录
                      </p> :
                      <p className="floor-ppagip">
                        当前显示
                        {this.state.goodsPageSize * (this.state.goodsPage - 1) + 1}—
                        {this.state.goodsPageSize * this.state.goodsPage < this.state.goodsTotal ? this.state.goodsPageSize * this.state.goodsPage : this.state.goodsTotal}条记录，
                        共{this.state.goodsTotal}条记录
                      </p>
                  }
                  <Pagination current={this.state.goodsPage} total={this.state.goodsTotal || 1} defaultPageSize={this.state.goodsPageSize} onChange={this.onChangePageGoods.bind(this)} />
                </div>
              </div>
            </div>
            <div style={{ paddingLeft: '800px' }}>
              <Button onClick={this.clearGoods.bind(this)}>清空选择</Button>&nbsp;&nbsp;&nbsp;&nbsp;
            <Button type='primary' onClick={this.selectSure.bind(this)}>选好了</Button>
            </div>


          </div>
          {/* 已选商品 */}
          <div style={this.state.goodsShow == false ? { display: 'block' } : { display: 'none' }}>
            <p>已选商品</p>
            <Table columns={goodsColumns}
              //  rowSelection={rowSelection} 
              dataSource={this.state.checkGoodsList}
              pagination={false} bordered style={{ marginTop: '30px' }} rowKey='productId' />
          </div>
        </Modal>

      </div>

    )
  }
}


export default Form.create()(diseaseManage);